<template>
  <div>
    <!-- 父子组件的样式不加scoped都是全局
    当前组件如果加了scoped。它是只管自己(可以看得到的都可以管),但是可以管到子组件最外层    
     -->
    <el-button>
      <div class="btn">我是按钮</div>
    </el-button>
    <el-form label-width="100px">
      <el-form-item label="按钮标题：">
        <div class="btn">我是按钮</div>
      </el-form-item>
    </el-form>
    <son class="box1"></son>
    <div class="box">我是父组件盒子</div>
    <div class="box1">我是父组件盒子</div>
    <router-view></router-view>
  </div>
</template>
<script>
import son from './components/son'
export default {
  components: {
    son
  }
}
</script>
<style scoped>
.box1 {
  width: 950px;
  height: 950px;
  background-color: #0f0;
}
.btn {
  color: red;
}
.el-form-item__label {
  color: red !important;
}
</style>
